import { defineStore } from 'pinia';
import defaultSettings from '@/settings';
import { useStorage } from '@vueuse/core';

export const useSettingsStore = defineStore('setting', () => {
    // state
    const tagsView = useStorage<boolean>('tagsView', defaultSettings.tagsView);

    const showSettings = ref<boolean>(defaultSettings.showSettings);
    const fixedHeader = ref<boolean>(defaultSettings.fixedHeader);
    const sidebarLogo = ref<boolean>(defaultSettings.sidebarLogo);

    const layout = useStorage<string>('layout', defaultSettings.layout);

    // actions
    function changeSetting(param: { key: string; value: any }) {
        const { key, value } = param;
        switch (key) {
            case 'showSettings':
                showSettings.value = value;
                break;
            case 'fixedHeader':
                fixedHeader.value = value;
                break;
            case 'tagsView':
                tagsView.value = value;
                break;
            case 'sidevarLogo':
                sidebarLogo.value = value;
                break;
            case 'layout':
                layout.value = value;
                break;
            default:
                break;
        }
    }

    return {
        showSettings,
        tagsView,
        fixedHeader,
        sidebarLogo,
        layout,
        changeSetting
    };
});
